<!DOCTYPE html>
<html>
<head>
<title>My Movie World</title>
<meta charset="utf-8">
<style>
  div.img {
      margin: 5px;
      border: 1px solid #ccc;
      float: left;
      width: 360px;
  }
  
  div.img:hover {
      border: 1px solid #777;
  }
  
  div.img img {
      width: 100%;
      height: auto;
  }
  
  div.desc {
      padding: 15px;
      text-align: center;
      font-family:'Courier New', Courier, monospace;
  }
  </style>
<style>
  body{
    background:url(kxh458/image/background.jpg);
    background-attachment: fixed;
  }
</style>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgba(17, 17, 18, 0.871);
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover, .dropbtn {
    background-color:rgb(14, 15, 15);
}

.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ece9e9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
<style>
  .button {
    display: inline-block;
    border-radius: 4px;
    background-color: #2a2b2b;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
<style>
  .button {
    display: inline-block;
    border-radius: 4px;
    background-color: #2a2b2b;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 13.5px;
    padding: 20px;
    width: 120px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
    position:fixed;
    bottom:0;
    right:0;
  }
  .button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
<style>
  img {
    border-radius: 8px;
  }
</style>
<style>
  h1{
    text-align: center;
    font-size:40px;
    font-weight: 350;
    font-family:'Courier New', Courier, monospace;
  }
</style>

</head>
<body>

<ul>
  <li><a class="active" href="index.html">主页</a></li>
  <div class="dropdown">
    <a href="Movie1.html" class="dropbtn">搏击俱乐部</a>
    <div class="dropdown-content">
      <a href="Movie1.html">剧情简介</a>
      <a href="Movie1Character.html">主要人物</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="Movie2.html" class="dropbtn">美国丽人</a>
    <div class="dropdown-content">
      <a href="Movie2.html">剧情简介</a>
      <a href="Movie2_character.html">主要人物</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="Movie3.html" class="dropbtn">出租车司机</a>
    <div class="dropdown-content">
      <a href="Movie3.html">剧情简介</a>
      <a href="Movie3_character.html">主要人物</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="Movie4.html" class="dropbtn">阿甘正传</a>
    <div class="dropdown-content">
      <a href="Movie4.html">剧情简介</a>
      <a href="Movie4_character.html">主要人物</a>
    </div>
  </div>
</ul>
<div class="button">
  <a href="http://wang-fan321.gitee.io/514-building-11-east" style="vertical-align: middle;color:white;font-size: large;"><span>返回寝室</span></a>
</div>

<h1>Welcome to my movie world!</h1>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="Movie1.html">
      <img src="kxh458/image/F.png" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">It's only after we've lost everything that we're free to do anything.<br>--Fight Club<br></div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="Movie2.html">
      <img src="kxh458/image/A.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">I had always heard your entire life flashes... in front of your eyes the second before you die.<br>--American Beauty <br></div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="Movie3.html">
      <img src="kxh458/image/T.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">You talking to me?<br>--Taxi Driver<br></div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="Movie4.html">
      <img src="kxh458/image/G.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">Life was like a box of chocolates. You never know what you're going to get.<br>--Forrest Gump</div>
  </div>
</div>

</body>
</html>